<template>
  <view v-if="show" class="overlay">
    <view class="box">
      <view class="dots">
        <view class="d"/><view class="d"/><view class="d"/>
      </view>
      <text class="msg">{{message || '加载中...'}}</text>
    </view>
  </view>
</template>

<script>
export default{ name:'LoadingOverlay', props:{ show:Boolean, message:String } }
</script>

<style scoped>
.overlay{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;z-index:2000}
.box{background:#fff;border-radius:16rpx;padding:24rpx 32rpx;display:flex;flex-direction:column;align-items:center}
.dots{display:flex;gap:8rpx;margin-bottom:8rpx}
.d{width:10rpx;height:10rpx;border-radius:50%;background:#00D4FF;animation:jump 1s ease-in-out infinite;filter:drop-shadow(0 2rpx 4rpx rgba(0,0,0,.15))}
.d:nth-child(2){animation-delay:.15s}
.d:nth-child(3){animation-delay:.3s}
@keyframes jump{0%,100%{transform:translateY(0)}50%{transform:translateY(-6rpx)}}
.msg{color:#2D3047}
</style>


